<template>
    <div class="table">
        <div class="container">
            <div class="handle-box" style="text-align: left">
                <el-select v-model="roleId0" placeholder="请选择" @change="select0" style="width: 200px;margin-bottom: 1rem;">
                    <el-option v-for="(item,index) of list0" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select placeholder="请选择" v-model="roleId1" style="width: 200px;">
                    <el-option v-for="(item,index) of list1" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-input v-model="select_word" placeholder="搜索" style="width: 150px;" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <el-button type="primary" @click="add" style="">添加用户</el-button>
                <el-button type="success" @click="addBatch" style="">批量导入</el-button>
                <a download="true" class="el-button el-button--primary el-button--small" :href="exportUrl">导出用户</a>
                <a class="el-button el-button--warning el-button--small" download="用户导入模板"
                   href="http://jzkj02.oss-cn-hangzhou.aliyuncs.com/file/在线考试用户导入模板02.xls">下载模板</a>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable">
                <el-table-column prop="user_name" label="姓名" sortable></el-table-column>
                <el-table-column prop="mobile" label="电话" sortable></el-table-column>
                <el-table-column prop="role_name" label="所属权限"></el-table-column>
                <el-table-column prop="centre" label="县区"></el-table-column>
                <el-table-column prop="working_group" label="班组"></el-table-column>
                <el-table-column prop="posts" label="岗位"></el-table-column>
                <el-table-column prop="sort" label="序列号" sortable></el-table-column>
                <el-table-column prop="create_time" sortable label="创建日期"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.is_delete=='0'">
                            <!--<el-switch-->
                                <!--v-model="scope.row.status==0"-->
                                <!--@click.native="openClose(scope.row)"-->
                                <!--active-text="启用"-->
                                <!--inactive-text="禁用">-->
                            <!--</el-switch>-->
                            正常
                        </div>
                        <span v-else>已删除</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="210" align="center" fixed="right">
                    <template slot-scope="scope">
                        <div v-if="scope.row.is_delete=='0'">
                            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            <el-button type="text" icon="el-icon-view" @click="resetP(scope.$index, scope.row)">重置密码</el-button>
                            <el-button type="text" icon="el-icon-error" @click="errorRecord(scope.$index, scope.row)">错题记录</el-button>
                            <el-button type="text" icon="el-icon-setting" @click="resetRole(scope.$index, scope.row)">修改权限</el-button>
                        </div>
                        <div v-else>
                            <el-button type="text" icon="el-icon-refresh" @click="userBack(scope.$index, scope.row)">还原</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="totalRow">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑用户信息" :visible.sync="editVisible" width="50%">
            <!--<roleAdd :uid="roleId" ref="roleAdd" @done="roleDone"></roleAdd>-->
            <el-form>
                <el-form-item label="姓名">
                    <el-input v-model="currentRole.user_name"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="currentRole.mobile"></el-input>
                </el-form-item>
                <el-form-item label="县区">
                    <el-input v-model="currentRole.centre"></el-input>
                </el-form-item>
                <el-form-item label="班组">
                    <el-input v-model="currentRole.working_group"></el-input>
                </el-form-item>
                <el-form-item label="岗位">
                    <el-input v-model="currentRole.posts"></el-input>
                </el-form-item>
                <el-form-item label="序列号">
                    <el-input v-model="currentRole.sort"></el-input>
                </el-form-item>
                <el-button type="primary" @click="sureEdit">提交</el-button>
            </el-form>
        </el-dialog>

        <!-- 错题弹出框 -->
        <el-dialog title="错题记录" :visible.sync="editVisible2" width="50%">
            <examineeError :uid="roleId" ref="examineeError"></examineeError>
        </el-dialog>

        <!-- 修改用户角色弹出框 -->
        <el-dialog title="修改用户角色" :visible.sync="editVisible3" width="50%">
            <examineeAuhtor :uid="roleId" ref="setAuthor" @done="roleDone"></examineeAuhtor>
        </el-dialog>
    </div>
</template>

<script>
    import examineeError from '@/components/module1/examinee-error'
    import examineeAuhtor from '@/components/module1/set-examinee-author'
    import pub from '../../utils/pub'
    import md5 from 'md5'
    // import URL from '../../utils/baseUrl'
    export default {
        components:{
            examineeError,
            examineeAuhtor
        },
        name: 'examinee',
        data() {
            return {
                tree: [],list0:[],list1:[],roleId0: '', roleId1: '',exportUrl:'',
                select_word: '',
                tableData: [],
                pageSize: 0,
                totalRow: 0,
                currentPage: 1,
                multipleSelection: [],
                editVisible: false,
                editVisible2: false,
                editVisible3: false,

                roleId: '',
                currentRole: {
                    user_name: '',
                    mobile: '',
                    centre: '',
                    working_group: '',
                    posts: '',
                    sort: '',
                }
            }
        },
        computed: {
            data() {
            }
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 改变pageSize
            handleSizeChange(){},
            // 分页导航
            handleCurrentChange(val) {
                this.getData(val);
            },
            // 获取区域列表
            getMenu(){
                this.config.get('/admin/role/findAll', {}).then(res=>{
                    if(res.data.code==='0'){
                        let arr = res.data.roleList;
                        this.tree = pub.arrayToTreeList(arr, 'id', 'pid');
                        this.list0 = this.tree[0].children;
                    }else{
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            select0(id){
                for (let item of this.list0) {
                    if (id == item.id) {
                        this.list1 = item.children
                    }
                }
            },
            // 获取列表数据
            getData(pageNumber) {
                this.loadopen();
                this.config.post('/admin/user/findPage', {
                    pageNum: pageNumber?pageNumber:1,
                    key_word: this.select_word,
                    role_id: this.roleId1?this.roleId1:this.roleId0?this.roleId0:''
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.currentPage = res.data.page.pageNumber;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            search() {
                this.getData();
                this.exportUrl = URL+'/admin/user/exportUser?key_word='+this.select_word+'&role_id='+(this.roleId1?this.roleId1:this.roleId0?this.roleId0:'');
            },
            // 添加角色
            add(){
                this.editVisible = true;
                this.roleId = '';
                this.currentRole.id = '';
                this.currentRole.user_name = '';
                this.currentRole.mobile = '';
                this.currentRole.centre = '';
                this.currentRole.working_group = '';
                this.currentRole.posts = '';
                this.currentRole.sort = '';
                // setTimeout(()=>{
                //     this.$refs.roleAdd.getInfo();
                // }, 100);
            },
            // 批量导入事件触发
            addBatch(num){
                let el = document.createElement('input');
                // let el = document.createElement('<input type="file" id="upFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">');
                el.type = 'file';el.accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel';
                el.id = 'upFile';
                el.click();
                el.onchange = (e)=> {
                    // console.log(e.target.files[0])
                    this.upFile(num, e.target.files[0])
                }
            },
            // 导入文件
            upFile(num, file){
                this.loadopen();
                let formData = new FormData();
                // 向 formData 对象中添加文件
                formData.append('batchImport',file);
                this.config.inster('/admin/user/batchImport',formData).then((res)=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getData();
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            // 编辑角色
            handleEdit(index, row) {
                this.editVisible = true;
                this.roleId = row.id;
                // setTimeout(()=>{
                //     this.$refs.roleAdd.getInfo(row);
                // }, 100);
                this.currentRole = row;
            },
            sureEdit(){
                let url = this.currentRole.id?'/admin/user/update':'/admin/user/add';
                let password = this.currentRole.id?'':'123456';
                this.config.post3(url, {
                    'user.id': this.currentRole.id||'',
                    'user.user_name': this.currentRole.user_name,
                    'user.mobile': this.currentRole.mobile,
                    'user.centre': this.currentRole.centre,
                    'user.working_group': this.currentRole.working_group,
                    'user.posts': this.currentRole.posts,
                    'user.sort': this.currentRole.sort||9999,
                    'user.password': this.currentRole.id?'':md5(password)
                }).then(res=>{
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.editVisible = false;
                        this.getData(this.currentPage);
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            // 查看错题记录
            errorRecord(index, row){
                this.editVisible2 = true;
                this.roleId = row.id;
                setTimeout(()=>{
                    this.$refs.examineeError.getPaperList();
                }, 100);
            },
            // 修改用户角色
            resetRole(index, row){
                this.editVisible3 = true;
                this.roleId = row.id;
                setTimeout(()=>{
                    this.$refs.setAuthor.getInfo();
                }, 100);
            },
            // 启用禁用
            openClose(row){
                this.config.post('/admin/user/isEnable', {id: row.id}).then(res=>{
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getData(this.currentPage);
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            handleDelete(index, row) {
                this.$confirm('确定删除此用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post('/admin/user/delete', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.code==='0'){
                            this.$message.success(res.data.message);
                            this.getData(this.currentPage);
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            // 重置密码
            resetP(index, row){
                // reSetPwd
                this.$confirm('确定重置该用户密码?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post('/admin/user/reSetPwd', {id: row.id, pwd: md5('123456')}).then(res=>{
                        this.loadclose();
                        if(res.data.code==='0'){
                            this.$message.success(res.data.message);
                            this.getData(this.currentPage);
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            // 还原被删除的用户
            userBack(index, row){
                this.$confirm('确定还原该用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post('/admin/user/recovery', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.code==='0'){
                            this.$message.success(res.data.message);
                            this.getData(this.currentPage);
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            roleDone(str) {
                this.editVisible = false;
                this.editVisible2 = false;
                this.editVisible3 = false;
                this.getData();
            },
            // 保存编辑
            goDetail(index, row) {
                this.$router.push({path: '/module1/question', query: {paperId: row.id}})
            },
        },
        mounted(){
            this.getData(1);
            this.getMenu();
            this.exportUrl = URL+'/admin/user/exportUser?key_word='+this.select_word+'&role_id='+(this.roleId1?this.roleId1:this.roleId0?this.roleId0:'');
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
</style>
